<template>
  <div>
    <el-dialog
      v-model="state.centerDialogVisible"
      :title="'项目任务延期原因' + (state.type ? '查看' : '上报')"
      width="50%"
      align-center
      @open="openHandler"
      @close="handleClose"
      class="dialogStyle"
    >
      <el-form
        ref="formRef"
        :model="formInline"
        :rules="rules"
        class="demo-form-inline"
        label-width="140px"
      >
        <el-form-item label="项目名称">
          <el-input
            disabled
            v-model="formInline.projectName"
            placeholder="项目名称"
          />
        </el-form-item>
        <el-form-item label="任务名称">
          <el-input
            disabled
            v-model="formInline.taskName"
            placeholder="任务名称"
          />
        </el-form-item>
        <el-form-item label="任务代码">
          <el-input
            disabled
            v-model="formInline.taskCode"
            placeholder="任务代码"
          />
        </el-form-item>
        <el-form-item label="是否里程碑">
          <el-radio-group v-model="formInline.isMilestone" disabled>
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="计划开始时间" class="twoline">
          <el-date-picker
            disabled
            v-model="formInline.planStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择计划开始时间"
          />
        </el-form-item>
        <el-form-item label="计划结束时间" class="twoline">
          <el-date-picker
            disabled
            v-model="formInline.planEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择计划结束时间"
          />
        </el-form-item>
        <el-form-item label="处理部门">
          <el-input
            disabled
            v-model="formInline.responsibleDepartmentName"
            placeholder=""
          />
        </el-form-item>
        <el-form-item label="处理人">
          <el-input
            disabled
            v-model="formInline.responsibleUserName"
            placeholder=""
          />
        </el-form-item>
        <el-form-item label="实际开始时间">
          <el-date-picker
            disabled
            v-model="formInline.realStartTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="实际开始时间"
          />
        </el-form-item>
        <el-form-item label="实际结束实际">
          <el-date-picker
            disabled
            v-model="formInline.realEndTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="实际结束实际"
          />
        </el-form-item>
        <p class="oneline" style="font-size: 12px; color: '#ccc'">延期情况说明</p>
        <el-form-item label="审核部门" prop="auditDepartmentId">
          <el-select
            v-if="!state.type"
            v-model="formInline.auditDepartmentId"
            value-key=""
            placeholder=""
            clearable
            @change="changeDepartment"
          >
            <el-option
              v-for="item in state.departmentOptions"
              :key="item.departmentId"
              :label="item.departmentName"
              :value="item.departmentId"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            disabled
            v-model="formInline.auditDepartmentName"
            placeholder=""
          />
        </el-form-item>
        <el-form-item label="审核人" prop="auditUserId">
          <el-select
            v-if="!state.type"
            v-model="formInline.auditUserId"
            value-key=""
            :disabled="state.disabled"
            placeholder=""
            clearable
            filterable
          >
            <el-option
              v-for="item in state.userOptions"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            >
            </el-option>
          </el-select>
          <el-input
            v-else
            disabled
            v-model="formInline.auditUserName"
            placeholder=""
          />
        </el-form-item>
  
        <el-form-item label="备注" class="oneline" prop="remark">
          <el-input
            :disabled="state.type"
            v-model="formInline.remark"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.centerDialogVisible = false" class="button_cancel2">取消</el-button>
          <el-button @click="submitHandler" v-if="!state.type" class="button_view"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import upload from "@/components/uploadCom/upload.vue";
import { ref, reactive, onMounted } from "vue";
import { taskSupervise, department } from "@/api/project";

import { ElDialog, ElForm, ElMessage, ElFormItem } from "element-plus";

const formInline = reactive({});
const state = reactive({
	projectTaskId: "",
	centerDialogVisible: false,
	projectRow: {},
	type: 0,
	userOptions: [],
	departmentOptions: [],
});
const rules = {
	auditDepartmentId: [
		{ required: true, message: "请选择审核部门", trigger: "blur" },
	],
	auditUserId: [{ required: true, message: "请输入审核人", trigger: "blur" }],
	remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
};
//弹框打开前的回调
const openHandler = async () => {
	console.log(state.projectTaskId);
	
	await taskSupervise.getInfo(state.projectTaskId).then((res) => {
		if (res.code == "200") {
			let obj = { ...res.data, ...res.data?.auditInfo, ...state.projectRow };

			for (const key in obj) {
				formInline[key] = obj[key] || "";
			}
			getUserByDepartment(formInline.auditDepartmentId);
		}
	});
};
const emits = defineEmits(["refreshList"]);
//弹框关闭
const handleClose = () => {
	for (const key in formInline) {
		formInline[key] = "";
	}
	emits("refreshList");
};
//获取所有部门信息
const getdepartmentList = () => {
	department.getAllDepartments().then((res) => {
		state.departmentOptions = res?.data || [];
	});
};
//通过部门ID获取人员
const getUserByDepartment = (id) => {
	department.getUserByDepartmentId(id).then((res) => {
		state.userOptions = res?.data || [];
	});
};
//部门变化拉去人员信息
const changeDepartment = (val) => {
	console.log("------------", val);
	formInline.auditUserId=''
	getUserByDepartment(val);
};
const formRef = ref(null);
//上报提交
const submitHandler = () => {
	formRef.value.validate(async (valid, fields) => {
		if (valid) {
			await taskSupervise
				.save({
					projectTaskId: formInline.projectTaskId,
					auditUserId: formInline.auditUserId,
					remark: formInline.remark,
				})
				.then((res) => {
					if (res.code == "200") {
						state.centerDialogVisible = false;
						ElMessage.success("上报成功");
					}
				});
		}
	});
};
defineExpose({
	state,
});
onMounted(() => {
	//获取部门
	getdepartmentList();
});
</script>

<style lang="scss" scoped>
@import "@/assets/general_style/dialog.scss";
@import '@/views/constructionProjectManage/static/dialog.scss';
</style>
